<template>
  <el-form
    class="ezForm"
    :inline="inline"
    :model="formData"
    ref="form"
    label-width="160px"
  >
    <el-form-item
      v-for="(item, index) in formMap"
      :key="index"
      :prop="item.key"
    >
      <!-- :label="item.label || ''" -->
      <el-button
        v-if="item.type == 'button'"
        :type="item.btnOpt.type || 'primary'"
        @click="onBtnClick(item)"
        >{{ item.btnOpt && item.btnOpt.label }}</el-button
      >
      <el-input
        v-else-if="item.type == 'mininput'"
        v-model="formData[item.key]"
        :style="{ width: `${width}px` }"
        style="margin-right: -10px"
        clearable
        :placeholder="item.placeholder || '请输入' + item.label"
      ></el-input>
      <el-input
        v-else-if="item.type == 'maxinput'"
        v-model="formData[item.key]"
        :style="{ width: `${width}px` }"
        clearable
        :placeholder="item.placeholder || '请输入' + item.label"
      ></el-input>
      <el-input
        v-else-if="item.type == 'input'"
        v-model="formData[item.key]"
        :style="{ width: `${width}px` }"
        clearable
        :placeholder="item.placeholder || '请输入' + item.label"
      ></el-input>
      <el-select
        v-else-if="item.type == 'select'"
        clearable
        v-model="formData[item.key]"
        :placeholder="item.placeholder || '请选择' + item.label"
        :style="{ width: `${width}px` }"
        :allow-clear="true"
      >
        <el-option
          v-for="opt in item.options"
          :key="opt.value"
          :value="opt.value"
          :label="opt.label"
        ></el-option>
      </el-select>
      <el-date-picker
        v-else-if="item.type == 'selectmonth'"
        size="small"
        v-model="formData[item.key]"
        type="month"
        value-format="yyyy-MM-dd"
        placeholder="选择月"></el-date-picker>     
      <el-date-picker
        v-else-if="item.type == 'cratedate'"
        size="small"
        style="width: 250px; margin-right: 4px"
        v-model="formData[item.key]"
        type="daterange"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="创建开始时间"
        end-placeholder="创建结束时间"
        clearable
      ></el-date-picker>
      <el-date-picker
        v-else-if="item.type == 'releasedate'"
        size="small"
        style="width: 250px; margin-right: 4px"
        v-model="formData[item.key]"
        type="daterange"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="发布开始时间"
        end-placeholder="发布结束时间"
        clearable
      ></el-date-picker>
      <el-date-picker
        v-else-if="item.type == 'cratedatdate'"
        size="small"
        style="width: 250px; margin-right: 4px"
        v-model="formData[item.key]"
        type="daterange"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="注册开始时间"
        end-placeholder="注册结束时间"
        clearable
      ></el-date-picker>
      <el-date-picker
        v-else-if="item.type == 'paytime'"
        size="small"
        style="width: 250px; margin-right: 4px"
        v-model="formData[item.key]"
        type="daterange"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="支付开始时间"
        end-placeholder="支付结束时间"
        clearable
      ></el-date-picker>
      <el-date-picker
        v-else-if="item.type == 'selttletime'"
        size="small"
        style="width: 250px; margin-right: 4px"
        v-model="formData[item.key]"
        type="daterange"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="结算开始时间"
        end-placeholder="结算结束时间"
        clearable
      ></el-date-picker>
      <el-date-picker
        v-else-if="item.type == 'selttledate'"
        size="small"
        style="width: 250px; margin-right: 4px"
        v-model="formData[item.key]"
        type="date"       
        value-format="yyyy-MM-dd"
        placeholder="结算日期"
        clearable
      ></el-date-picker>
      <el-date-picker
        v-else-if="item.type == 'lastlogindate'"
        size="small"
        style="width: 250px; margin-right: 4px"
        v-model="formData[item.key]"
        type="daterange"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="登录开始时间"
        end-placeholder="登录结束时间"
        clearable
      ></el-date-picker>
      <el-date-picker
        v-else-if="item.type == 'referrerdate'"
        size="small"
        style="width: 250px; margin-right: 4px"
        v-model="formData[item.key]"
        type="daterange"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="推广开始时间"
        end-placeholder="推广结束时间"
        clearable
      ></el-date-picker>
      <el-date-picker
        v-else-if="item.type == 'shippingdate'"
        size="small"
        style="width: 250px; margin-right: 4px"
        v-model="formData[item.key]"
        type="daterange"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="发货开始时间"
        end-placeholder="发货结束时间"
        clearable
      ></el-date-picker>
      <el-date-picker
        v-else-if="item.type == 'changedate'"
        size="small"
        style="width: 250px; margin-right: 4px"
        v-model="formData[item.key]"
        type="daterange"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="变更开始时间"
        end-placeholder="变更结束时间"
        clearable
      ></el-date-picker>
      <el-date-picker
        v-else-if="item.type == 'underdate'"
        size="small"
        style="width: 250px; margin-right: 4px"
        v-model="formData[item.key]"
        type="daterange"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="下线开始时间"
        end-placeholder="下线结束时间"
        clearable
      ></el-date-picker>
      <el-date-picker
        v-else-if="item.type == 'updatadata'"
        size="small"
        style="width: 250px; margin-right: 4px"
        v-model="formData[item.key]"
        type="daterange"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="更新日期"
        end-placeholder="更新日期"
        clearable
      ></el-date-picker>
      <el-date-picker
        v-else-if="item.type == 'changedata'"
        size="small"
        style="width: 250px; margin-right: 4px"
        v-model="formData[item.key]"
        type="daterange"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="变更日期"
        end-placeholder="变更日期"
        clearable
      ></el-date-picker>
      <el-date-picker
        v-else-if="item.type == 'enddata'"
        size="small"
        style="width: 250px; margin-right: 4px"
        v-model="formData[item.key]"
        type="daterange"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="结束时间"
        end-placeholder="结束时间"
        clearable
      ></el-date-picker>
      <el-date-picker
        v-else-if="item.type == 'checkdata'"
        size="small"
        style="width: 250px; margin-right: 4px"
        v-model="formData[item.key]"
        type="daterange"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="单据审核结束时间"
        end-placeholder="单据审核结束时间"
        clearable
      ></el-date-picker>
      <el-date-picker
        v-else-if="item.type == 'checkenddata'"
        size="small"
        style="width: 250px; margin-right: 4px"
        v-model="formData[item.key]"
        type="daterange"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="盘点审核结束时间"
        end-placeholder="盘点审核结束时间"
        clearable
      ></el-date-picker>
      <el-date-picker
        clearable
        v-else-if="item.type == 'date'"
        v-model="formData[item.key]"
        :type="item.type"
        :style="{ width: `${width}px` }"
        placeholder="选择日期"
      >
      </el-date-picker>

      <el-radio-group
        class="search-radio"
        v-else-if="item.type == 'radio'"
        v-model="formData[item.key]"
        :type="item.type"
        :style="{ width: `${width}px` }"
      >
        <el-radio
          v-for="opt in item.options"
          :key="opt.value"
          :value="opt.value"
          :label="opt.label"
        ></el-radio>
      </el-radio-group>
      <el-cascader
        v-else-if="item.type == 'address'"
        v-model="formData[item.key]"
        placeholder="请选择省市区"
        :options="item.options"
        size="small"
        clearable
      ></el-cascader>
    </el-form-item>
    <el-form-item v-if="search">
      <el-button type="primary" @click="onSearch">查询</el-button>
      <el-button @click="onReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "EzForm",
  components: {},
  model: {
    prop: "formData",
  },
  props: {
    inline: {
      type: Boolean,
      default: true,
    },
    search: {
      type: Boolean,
      default: true,
    },
    lableWidth: {
      type: String,
      default: "auto",
    },
    formMap: {
      required: true,
      type: Array,
      default() {
        return [];
      },
    },
    formData: {
      required: true,
      type: Object,
      default() {
        return {};
      },
    },
    width: {
      type: String | Number,
      default: 200,
    },
  },
  data() {
    return {};
  },
  methods: {
    onSearch() {
      this.$emit("search", this.formData);
    },
    onReset() {
      this.$refs["form"].resetFields();
      this.$emit("reset", this.formData);
      this.$emit("search", this.formData);
    },
  },
};
</script>

<style lang="scss" scoped>
.ezForm .el-form--inline {
  width: auto;
}
</style>
<style>
.ezForm .el-input__inner {
  height: 32px;
}
.ezForm .el-form-item {
  margin-bottom: 0;
}
.ezForm .el-button {
  padding: 9px 15px;
  font-size: 12px;
}
</style>
